const path = require('path');
const htmlWebpackPlugin  = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const isDev = process.env.NODE_ENV ==='development';
const webpack = require('webpack');
const {VueLoaderPlugin}  = require('vue-loader')
const config = {
    target:"web",
    entry:path.join(__dirname,'src/index.js'),
    output:{
        filename:"[hash]-bundle.js",
        path:path.join(__dirname,'dist')
    },
    plugins:[
        new CleanWebpackPlugin(),
        new htmlWebpackPlugin(),
        new VueLoaderPlugin(),
        new webpack.DefinePlugin({
            // 这里定义在js中可以引用用于判断当前开发环境
            'process.env':{
                NODE_ENV:isDev?'"development"':'"production"'
            }
        })
    ],
    module:{
        rules:[
            {
                test:/.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },{
                test: /\.(png|jpe?g|gif)$/i,
                loader: 'url-loader',
            },{
                test:/\.vue$/,
                loader:"vue-loader"
            }
        ]
    },
    mode:"development"
}
if(isDev){
    config.devServer = {
        port:8080,
        host:'localhost',
        hot:true
    }
}
module.exports = config;